<template>
	<view>
		<!-- 选择站点列表 -->
		<u-popup border-radius="14" width="90%" v-model="innerShow" z-index="9997">
			<view class="msgbox">
				<scroll-view class="left-box" :scroll-y="true">
					<view @click="replacestore(item)" class="item" :class="{'ac': item.id == storeId }" v-for="(item, index) in mystorelist" :key="item.id">
						<view class="imgbox">
							<view class="img">
								{{ item.name.charAt(0) }}
							</view>
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<view class="head-box">
					<view class="head">
						<view class="name-box">
							<view class="t1 u-line-1">
								{{ mydata.mystorename }}
							</view>
							<!-- <view class="name u-line-1">
								店员信息：{{ mydata.usename }}
							</view> -->
							<view class="name u-line-1">
								所属加盟商：{{mydata.franchisename}}
							</view>
						</view>
					</view>
					<view class="mylist">
						<!-- <view class="u-flex" @click="getQRCode">
							<view class="u-flex-1 u-flex">
								<u-icon name="scan" class="u-m-r-15"></u-icon>
								<view>站点二维码</view>
							</view>
							<u-icon name="arrow-right" class="u-m-r-15"></u-icon>
						</view> -->
						<view class="u-flex" @click="showQRcode = true">
							<!-- <view class="u-flex-1 u-flex">
								<u-icon name="scan" class="u-m-r-15"></u-icon>
								<view>站点二维码</view>
							</view>
							<u-icon name="arrow-right" class="u-m-r-15"></u-icon> -->
							<view class="u-flex-1">
								<u-image
									class="u-flex"
									width="420rpx"
									:src="qrcodeURL"
									mode="widthFix">
								</u-image>
								<view class="u-text-center u-w-420 u-p-t-30">
									<text class="u-font-36">站点登录二维码</text>
									<view>
										<text class="tips-txt">点击放大</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="u-text-center u-p-b-60 u-w-420" @click="show = false">
						<u-icon name="close-circle" size="70" color="#c5c9d1"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showQRcode" mode="center" border-radius="14" :closeable="true" z-index="9999">
			<view class="u-p-80">
				<u-image
					class="u-flex"
					width="500rpx"
					:src="qrcodeURL"
					mode="widthFix">
				</u-image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		props:{
			show:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				innerShow: false,
				// 站点选择
				mystorelist: [],
				mydata:{
					mystorename: '',
					usename:'',
					franchisename: ''
				},
				// 我的二维码
				showQRcode: false,
				qrcodeURL: '',
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId
			})
		},
		watch:{
			show(val){
				this.innerShow = val
				if(val){
					this.getQRCode()
				}
			},
			innerShow(val){
				if(!val){
					this.$emit('close',false)
				}
			}
		},
		mounted() {
			this.innerShow = this.show
			// 站点列表
			this.$store.dispatch('getDetails').then((res)=>{
				// 查看是否归属于某个运营商下
				const operator = res.bindinfo.operator
				// 查看运营商下有多少运营组
				const franchiselist = operator.franchiselist
				let allStoreList = []
				if(franchiselist.length > 0){
					franchiselist.forEach((cell)=>{
						cell.storelist.forEach((con)=>{
							con.franchiseId = cell.id
						})
						const storelist = cell.storelist
						if(storelist.length > 0){
							storelist.map((storeItem)=>{
								storeItem.franchiseId = cell.id,
								storeItem.franchiseName = cell.name
								// storeItem.hasValid = true  //表示可切换
							})
							allStoreList.push(...storelist)
						}
					})
				}
				console.log('我的站点:',allStoreList.filter((item)=>item.usestate == '已启用'))
				uni.setStorageSync('allStoreList',allStoreList.filter((item)=>item.usestate == '已启用').filter((item)=>item.ismanager == true || item.isstaff))
				this.mystorelist = uni.getStorageSync('allStoreList')
				console.log('id',this.storeId,this.mystorelist)
				
				if(!this.storeId){
					this.$u.vuex('storeId', this.mystorelist[0].id)
					this.$u.vuex('franchiseId', this.mystorelist[0].franchiseId)
					this.mydata.mystorename = this.mystorelist[0].name
					this.mydata.franchisename = this.mystorelist[0].franchiseName
				}else{
					try {
						this.mydata.mystorename = this.mystorelist.find((item)=>item.id == this.storeId).name
						this.mydata.franchisename = this.mystorelist.find((item)=>item.id == this.storeId).franchiseName
						this.mydata.usename = this.userdetail.name
						this.$u.vuex('franchiseId', this.mystorelist.find((item)=>item.id == this.storeId).franchiseId)
					} catch (error) {
						uni.showModal({
							content: '您上次登录的站点已关闭或无权访问，请切换站点再操作',
							success: (res)=> {
								if (res.confirm) {
									this.$emit('choose',true)
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
				}

				this.$emit('replacestore',this.mydata)
				// 获取总览数据
				// this.getOperatingData()
			})
		},
		methods: {
			replacestore(item) {				
				this.$u.vuex('storeId', item.id)
				this.$u.vuex('franchiseId',item.franchiseId)
				this.mydata.mystorename = this.mystorelist.find((cell)=>cell.id == item.id).name
				this.mydata.franchisename = this.mystorelist.find((cell)=>cell.id == item.id).franchiseName
				// this.show = false
				uni.showToast({
					title:'切换成功'
				})
				this.$emit('replacestore',this.mydata)
				this.getQRCode()
			},
			getQRCode(){
				// this.showQRcode = true
				this.$u.get('/User/MyQrCode?id='+this.storeId).then((base64img)=>{
					this.qrcodeURL = base64img
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 站点选择列表
	.msgbox{
		display: flex;
		justify-content: space-between;
		
		.imgbox{
			display: flex;
		    flex-direction: column;
		    align-items: center;
			// margin: 10rpx 0;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			// background-color: red;
			width: 190rpx;
			>.img{
				margin-bottom:20rpx;
				border: 2rpx solid rgb(203, 209, 209);
				border-radius: 10rpx;
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				color: $u-tips-color;
			}
		}
		.left-box {
			background-color: #f5f5f5;
			height: 100vh;
			width: 190rpx;
			// padding-top: 30rpx;
			// padding-top: 28rpx;
		
			.item {
				background-color: #f5f5f5;
			}
		
			.ac {
				color:  $u-color-main;
				background-color: rgb(255, 255, 255);
				.img{
					background-color: $u-color-main;
					color: #fff;
					border-color: $u-color-main;
				}
			}
		}
		
		.head {
			margin-right: 30rpx;
		}
		
		.head-box {
			padding-top: calc(var(--status-bar-height));
			margin-top: 17px;
			margin-left: 30rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			.name-box {
				border-bottom: 5rpx  #f5f5f5 solid;
				padding-bottom: 20rpx;
				
			}
		
			.mylist {
				flex:1;
				>view {
					display: flex;
					margin: 30rpx 0;
					font-size: 30rpx;
				}
			}
		
		}
		
		.t1 {
			margin: 20rpx 0;
			font-size:40rpx;
			font-weight: 700;
			margin-bottom: 10rpx;
		}
		.name{
			font-size: 25rpx;
		    font-weight: 400;
		    color: #909399;
		}
		
	}
</style>
